<template>
  <div class="star-box" :class="{ small: small, large: large }">
    <img
      v-for="item in 5"
      :key="item"
      :src="
        item <= star
          ? $global.Image.icon_star_small
          : $global.Image.icon_star_small_grey
      "
      @click="handelClick(item)"
    />
  </div>
</template>

<script>
export default {
  name: "Star",
  props: {
    star: {
      type: Number,
      default: 0
    },
    small: {
      type: Boolean,
      default: false
    },
    large: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    handelClick (val) {
      this.$emit('change', val)
    }
  }
};
</script>

<style scoped  lang="scss" scoped>
.star-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin: 0 6px;
  }
}
.small img {
  width: 14px;
  height: 14px;
  margin: 0 2px;
}
.large img {
  width: 32px;
  height: 32px;
  margin: 0 10px;
}
</style>
